<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>明细</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.2/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.min.css">

    <link rel="stylesheet" href="css/weui.min.css" />
    <link rel="stylesheet" href="fonts/iconfont.css" />
    <!-- <link rel="stylesheet" href="js/swiper/css/swiper.min.css" /> -->
    <link rel="stylesheet" href="css/style.css" />
    <script src="js/jquery-2.2.3.min.js"></script>
    <!-- <script src="js/weui.min.js"></script>
	<script src="js/swiper/js/swiper.min.js"></script> -->

</head>
<style>
    .jl-item .cont{
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
</style>

<body>
    <div class="content" style="background-color: #FFFFFF; width: 100%;height:100%; position: absolute;padding:0px; overflow: hidden;">
        <div class="list-main-mian weui-form-preview infinite weui-pull-to-refresh" id="listwrap" style="height:100%; margin-top: 1px;overflow:auto;  z-index: 1">

            <div class="weui-form-preview" id="Tolist">
                <!--内容展示区域-->
            </div>
            <div class="weui-loadmore" style="padding-bottom:30px;height:20px">
                <i class="weui-loading"></i>
                <span class="weui-loadmore__tips">正在加载</span>
            </div>
        </div>
    </div>
</body>
<!-- <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> -->
<script src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.min.js"></script>
<script src="./api.js"></script>
<script>
    var api = getApi()
    var pages = 1;
    var sizes = 8;
    var loading = false;  //状态标记
    let userinfo = JSON.parse(localStorage.getItem('wxUserInfo')).data
    let customerID = userinfo.customer.customerID

    // 获取token
    let token = userinfo.token
    console.log(token, customerID)
    $(function () {
        loadlist();
    })
    //============================滚动加载===========
    $("#listwrap").infinite().on("infinite", function () {
        if (loading) return;
        loading = true;
        pages++; //页数
        $('.weui-loadmore').show();
        setTimeout(function () {
            loadlist();
            loading = false;
        }, 2500);   //模拟延迟
    });
    // =======加载数据loadlist()=============
    function loadlist() {
        var html = "";
        $.ajax({
            type: "get",
            url: `${api}/consumingRecords/${customerID}/0/${pages}/${sizes}`,
            headers: {
                "Authorization": token
            },
            dataType: "json",
            error: function (request) {
                $(".weui-loadmore").hide();
                html += "<div class=\"weui-cells__title\" >已无更多数据</div>";
                $("#Tolist").append(html);
            },
            success: function (data) {
                let totolePage = data.data.pages
                if (totolePage >= pages) {
                    data.data.list.forEach((item, index) => {
                        if (item.consumingTypeID == 2) {
                            html += `<div class="weui-cell jl-item get-detail" style="padding:16px;" data-orderID=${item.orderID}>
									<div class="weui-cell__hd">
										<div class='number'>
                                            <span style="color: #F44831;">${0 - item.price}</span>
                                            <span style="font-size:10px;color:#9F9F9F;line-height:14px;vertical-align: middle;">已退款</span>
                                        </div>
										<div class="date">${item.operateTime}</div>
									</div>
									<div class="weui-cell__bd cont">
										${item.note}
									</div>
								</div>`
                        } else {
                            html += `<div class="weui-cell jl-item get-detail" style="padding:16px;"  data-orderID=${item.orderID}>
									<div class="weui-cell__hd">
										<div class='number'>${0 - item.price}</div>
										<div class="date">${item.operateTime}</div>
									</div>
									<div class="weui-cell__bd cont">
											${item.note}
									</div>
								</div>`
                        }
                    })
                    $('#Tolist').append(html)
                }
                else {
                    html += "<div class=\"weui-cells__title\" >已无更多数据</div>";
                    $("#Tolist").append(html);
                    loading = true;
                }
                $(".weui-loadmore").hide();
            }
        });
    }

    //点击加载详情
    $('#Tolist').on('click', '.get-detail', function () {
        if ($(this).attr('data-orderID')) {
            window.location.href = `./consumptionDetails.html?orderID=${$(this).attr('data-orderID')}`;
        }
    })
</script>

</html>